<!--
 * @Author: dengyl
 * @Date: 2022-01-18 14:08:49
 * @LastEditTime: 2022-08-19 16:55:23
 * @LastEditors: 代琪 1529992814@qq.com
 * @Description: 公告-标题摘要
 * @FilePath: \code\ctp-static-portal-front\src\components\Bulletin\components\abstract.vue
-->
<template>
  <div class="abstract" :style="`background-color: ${options.backgroundColor}`">
    <ul ref="$ulDom">
      <li v-for="item in initList" :key="item.id">
        <div class="info-pane">
          <div class="title">
            <a :href="`${newsBasePath}${item.link}`" target="_blank">{{ item.subject }}</a>
          </div>
          <div class="detail">{{ item.brief }}</div>
          <div class="info">
            <span v-if="options.rowList.includes('publishDate')">{{ item.createDate }}</span
            ><span v-if="options.rowList.includes('type')" :title="item.categoryLabel">{{
              item.categoryLabel
            }}</span>
            <span
              v-if="options.rowList.includes('publishMember')"
              :title="`${item.publishMember ? item.publishMember + '/' : ''}${
                item.publishDepartment
              }`"
              class="name"
            >
              <span>{{
                `${item.publishMember ? item.publishMember + '/' : ''}${item.publishDepartment}`
              }}</span>
            </span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'BulletinAbstract',
    props: {
      list: { type: Array },
      options: { type: Object }
    },
    data() {
      return {
        imgBasePath: imgBasePath,
        newsBasePath: `${_basePath}/`
      };
    },
    computed: {
      initList() {
        return this.list ? this.list.slice(0, +this.options.count) : [];
      }
    }
    // methods: {
    //   textOverflow(str) {
    //     if (!str) return '';
    //     return str.length > 30 ? `${str.substring(0, 30)}...` : str;
    //   },
    // },
  };
</script>
<style lang="scss" scoped>
  .abstract {
    > ul {
      padding: 0;
      margin: 0;
      list-style: none;

      > li {
        // height: 140px;
        margin-top: 10px;

        > div {
          vertical-align: top;
        }

        > .info-pane {
          position: relative;
          height: 100%;
          // margin-left: 10px;
          border-bottom: 1px solid #fff;

          > .title {
            display: block;
            width: 100%;
            overflow: hidden;
            font-size: 16px;
            font-weight: bold;
            color: #333;
            text-overflow: ellipsis;
            word-break: keep-all;
            white-space: nowrap;

            > div {
              display: inline-block;
            }
          }

          > .detail {
            display: -webkit-box;
            max-height: 32px;
            margin-top: 10px;
            overflow: hidden;
            font-size: 12px;
            line-height: 16px;
            color: #999;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }

          > .info {
            // position: absolute;
            // bottom: 0;
            padding: 10px 0;
            font-size: 12px;
            color: #999;

            > span {
              margin-right: 20px;
            }
          }
        }
      }
    }
  }
</style>
